<template>
    <div class="homeindex">
      <header class="homeH">
          <i class="iconfont icon-location"></i>
          <span>深圳市</span>
      </header>
      <div class="homeSearch">
          <router-link to='/home-SearchMall' tag='input' placeholder = "搜索饿了么商家、商品名称"></router-link>
          <i class="iconfont icon-search"></i>
      </div>
      <ul class="homeNav">
          <router-link
          v-for = "(nav,index) in navs"
          :key="index"
          :to = "nav.href"
          tag = "li">
              <img :src="nav.img" alt="">
              <span>{{nav.title}}</span>
          </router-link>
      </ul>
      <div class="homeVip">
          <div class="vipL">
              <img src="@/assets/images/VIP.webp" alt="">
              <b>超级会员</b>
              <span> · 每月领20元红包</span>
          </div>
          <a href="">立即开通 &gt; </a>
      </div>
      <section>
          <router-link to = "/home/home_myOrder">
            <i class="iconfont icon-shopcart" style="font-size:.25rem;color:#B0AFB5;"></i>
          </router-link>
          <i class="iconfont icon-backTop" style="font-size:.25rem;color:#B0AFB5;" @click="heigh"></i>
          <ul class="lunch">
              <li>
                  <h3>品质套餐</h3>
                  <p>搭配齐全吃得好</p>
                  <a href="" style="color: #af8260;">立即抢购 &gt;</a>
                  <img src="@/assets/images/active_Food.webp" alt="套餐">
              </li>
              <li>
                  <h3 class="mar">限量抢购</h3>
                  <p>超值美味9.9元起</p>
                  <a href=""><b class="mar">9139人</b>正在抢购 &gt;</a>
                  <img src="@/assets/images/active_Snack.webp" alt="套餐">
              </li>
          </ul>
          <div class="banner">
            <mt-swipe :auto="4000">
              <mt-swipe-item><img src="/static/img/broadcast/double11.webp" alt=""></mt-swipe-item>
              <mt-swipe-item><img src="/static/img/broadcast/flower.webp" alt=""></mt-swipe-item>
              <mt-swipe-item><img src="/static/img/broadcast/open.webp" alt=""></mt-swipe-item>
              <mt-swipe-item><img src="/static/img/broadcast/sale.webp" alt=""></mt-swipe-item>
              <mt-swipe-item><img src="/static/img/broadcast/singba.webp" alt=""></mt-swipe-item>
            </mt-swipe>
          </div>
          <div class="shop-title">推荐商家</div>
          <div class="shop-menu">
            <router-link to='zhonghe' >
              综合排序
              <i class="iconfont icon-downArr" style="font-size:.1rem"></i>
            </router-link>
            <router-link to='zhonghe'> 距离最近</router-link>
            <router-link to='zhonghe'> 品质联盟</router-link>
            <router-link to='zhonghe'>筛选 <i class="iconfont icon-choose"></i></router-link>
          </div>
      </section>
      <main class="homeMenu"
            v-infinite-scroll
            infinite-scroll-distance="10">
            <router-view></router-view>
      </main>
    </div>
</template>
<script>
import "mint-ui/lib/style.css";
import { Swipe, SwipeItem } from 'mint-ui';
import { InfiniteScroll } from 'mint-ui';
export default {
  components: {
    'swipe': Swipe,
    'swipe-item': SwipeItem,
    'infinite-scroll': InfiniteScroll
  },

  data() {
    return {
      navs: [
        {
          id: "food",
          href: "/goodsinfo",
          title: "美食",
          img: require("@/assets/images/navimg/navBg_food.webp")
        },
        {
          id: "market",
          href: "/goodsinfo",
          title: "商城便利",
          img: require("@/assets/images/navimg/navBg_market.webp")
        },
        {
          id: "fruit",
          href: "/goodsinfo",
          title: "水果",
          img: require("@/assets/images/navimg/navBg_fruit.webp")
        },
        {
          id: "tea",
          href: "/goodsinfo",
          title: "早餐",
          img: require("@/assets/images/navimg/navBg_tea.webp")
        },
        {
          id: "medicine",
          href: "/goodsinfo",
          title: "医药健康",
          img: require("@/assets/images/navimg/navBg_medicine.webp")
        },
        {
          id: "flowers",
          href: "/goodsinfo",
          title: "浪漫鲜花",
          img: require("@/assets/images/navimg/navBg_rose.webp")
        },
        {
          id: "cook",
          href: "/goodsinfo",
          title: "厨房生鲜",
          img: require("@/assets/images/navimg/navBg_cook.webp")
        },
        {
          id: "run",
          href: "/goodsinfo",
          title: "跑腿代购",
          img: require("@/assets/images/navimg/navBg_run.webp")
        },
        {
          id: "snack",
          href: "/goodsinfo",
          title: "地方小吃",
          img: require("@/assets/images/navimg/navBg_snack.webp")
        },
        {
          id: "redPocket",
          href: "/goodsinfo",
          title: "签到领红包",
          img: require("@/assets/images/navimg/navBg_redPocket.webp")
        }
      ]
    };
  },
  methods : {
    fun(){
      var dao = document.getElementsByClassName("homeSearch")[0];
      document.addEventListener("scroll",this.hide);
    },
    hide(){
      var dao = document.getElementsByClassName("homeSearch")[0];
      var back = document.getElementsByClassName("icon-backTop")[0];
      window.onscroll = function(){
        var sTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(sTop >= 200) {
          dao.style.position = "fixed";
           back.style.display = "block";
          dao.style.top=0;
        }else if(sTop<190) {
          dao.style.position="static";
          back.style.display="none";
        }
      }
    },
    heigh(){
      document.documentElement.scrollTop=document.body.scrollTop=0;
    }
  },
  mounted(){
    this.fun();
    this.hide();
    this.heigh();
  }
};

</script>
<style lang="scss">
a {
  text-decoration: none;
}
input,
button {
  border: 0;
  outline: none;
}
.homeindex {
  background: white;
  margin-bottom: .6rem;
  .homeH {
    height: 0.44rem;
    line-height: 0.44rem;
    background-image: linear-gradient(90deg, #0af, #0085ff);
    color: white;
    font-weight: bold;
    font-size: 0.18rem;
    // text-align: center;
    position: relative;
    i {
      position: absolute;
      left: 0.15rem;
      top: 0;
    }
    span {
      margin-left: 0.35rem;
    }
  }
  .homeSearch {
    position: relative;
    background-image: -webkit-gradient(
      linear,
      left top,
      right top,
      from(#0af),
      to(#0085ff)
    );
    background-image: -webkit-linear-gradient(left, #0af, #0085ff);
    background-image: linear-gradient(90deg, #0af, #0085ff);
    padding: .1rem .15rem;
    z-index: 10000;
    input {
      width: 3.47rem;
      height: .36rem;
      border-radius: 0.03rem;
      text-align: center;
    }
    i {
      position: absolute;
      top: 0.15rem;
      left: 0.9rem;
      font-family: simsun;
      color: #999;
      font-size: 0.15rem;
      margin-right: 0.05rem;
    }
  }
  .homeNav {
    display: flex;
    flex-wrap: wrap;
    color: #666;
    font-size: 0.12rem;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 19%;
      margin-top: 0.1rem;
      img {
        width: 0.45rem;
      }
    }
  }
  .homeVip {
    width: 3.56rem;
    height: 0.4rem;
    background-image: -webkit-gradient(
      linear,
      left top,
      right top,
      from(#ffefc4),
      to(#f3dda0)
    );
    background-image: -webkit-linear-gradient(left, #ffefc4, #f3dda0);
    background-image: linear-gradient(90deg, #ffefc4, #f3dda0);
    background-size: 100%;
    align-items: center;
    color: #644f1b;
    display: flex;
    padding-left: 0.1rem;
    margin: 0.3rem auto 0;
    img {
      width: 0.17rem;
      margin-right: 0.03rem;
    }
    span {
      color: #8c632b;
      font-size: 0.11rem;
    }
    a {
      font-size: 0.12rem;
      color: #8c632b;
      margin-left: 1.1rem;
    }
  }
  section {
    background: #fff;
    position: relative;
    .icon-shopcart {
      width: .43rem;
      height: .43rem;
      line-height: .43rem;
      border-radius: 100%;
      background: white;
      position: fixed;
      right: .2rem;
      bottom: 1.2rem;
      border: 1px solid #B0AFB5;
      z-index: 50;
      text-align: center;
    }
    .icon-backTop {
      width: .43rem;
      height: .43rem;
      line-height: .43rem;
      border-radius: 100%;
      background: white;
      position: fixed;
      right: .2rem;
      bottom: .6rem;
      border: 1px solid #B0AFB5;
      z-index: 50;
      text-align: center;
      display: none;
    }
    .lunch {
      display: flex;
      align-items: center;
      margin: .1rem .05rem 0 .1rem;
      li {
        flex: 1;
        padding: 0 .1rem;
        margin-right: 0.05rem;
        background: #f8f8f8;
        p {
          font-size: 0.13rem;
          color: #777;
        }
        .mar {
          color: #e81919;
        }
        img {
          width: 1.2rem;
          margin-left: 0.33rem;
        }
        a {
          font-size: 0.11rem;
          color: #333;
          font-weight: bold;
        }
      }
    }
    .mint-swipe {
      width: 3.55rem;
      height: 0.85rem;
      margin: 0 auto;
      img {
        width: 100%;
      }
      .mint-swipe-indicators {
        bottom: 0;
        .mint-swipe-indicator {
          width: .12rem ;
          height: .02rem;
        }
      }
    }
    .shop-title {
      display: flex;
      align-items: center;
      justify-content: center;
      height: .4rem;
      font-size: .16rem;
      color: #000;
      &:before, &:after{
        margin-right: .17rem;
        content: "";
        width: .26rem;
        height: .02rem;
        background-color: #999;
      }
    }
    .shop-menu {
      border-bottom: 1px solid #F9F9F9;
      padding-bottom: .1rem;
      a {
        color: #666;
        margin: .1rem .15rem;
      }
       .router-link-active{
        //  font-weight:700;
          // color:#008eff;
      }
    }
  }
  .homeMenu {

  }
}
</style>




